<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>群组选择器+派生选择器</title>
		<style>
			/* 选择器：群组选择器--选中所有选择器选中的元素
			           语法：元素选择器，类选择器，id选择器{}*/
			p,div,#table,.dl{
			width:200px;
			height:200px;
			background: #ffaa7f;
			}
			/* 派生选择器（后代选择器）---选中父元素下的所有子元素 
			           语法：元素选择器 元素选择器{}
			*/
		   ul li{
			   width: 100px;
			   height: 100px;
			   background: #ffaaff;
		   }
		</style>
	</head>
	<body>
		<ul>
			<li>喜羊羊与灰太狼之虎虎生威</li>
			<li>喜羊羊与灰太狼之蛇年大吉</li>
			<li>喜羊羊与灰太狼之飞马奇遇记</li>
			<li>喜羊羊与灰太狼之喜气洋洋过大年</li>
		</ul>
		<hr>
		<!-- 块元素：特点：可以设置宽高，独占一行 -->
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident voluptates quasi blanditiis quia nostrum aliquid maxime voluptas aliquam odit ut, cum quas consequuntur, officiis labore vel. Distinctio iure tempore reprehenderit?</p>
	    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat labore iusto quo expedita omnis impedit nihil, natus laudantium modi. Dolores nemo maiores sit eveniet aperiam eligendi quam, ea consequatur veritatis?</div>
		<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae hic et, consequatur cupiditate fugiat rerum veniam deleniti similique autem dicta, quia, doloremque ab ea. Dolore suscipit ratione rerum eum saepe!</h2>
	    <table id="table">
	    	<tr>
	    		<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed tempora adipisci natus magni omnis mollitia harum asperiores excepturi error, autem recusandae dignissimos suscipit sint veritatis dolores debitis, reiciendis vel doloribus.</td>
	    		<td>lorem</td>
	    	</tr>
			    <td>lorem</td>
				<td>lorem</td>
	    </table>
		<dl class="dl">
		        <dl>图</dl>
				<dl>解析图</dl>
		</dl>
	</body>
</html>